import React, {Component} from 'react';
import {Card, Icon, Table} from "antd";
import {reqLookEmployee} from "../../api";
import Button from "antd/lib/button";
import {PAGE_SIZE} from '../../utils/constants';

/*
* 求职者信息路由*/
export default class Employee extends Component {
    state = {
        count:0,
        results: [],//当前页求职者信息列表
    }

    //异步获取求职者基本信息
    getEmployeeInformation = async (page) => {
        //发异步ajax请求，获取数据
        const result = await reqLookEmployee(page,PAGE_SIZE)
        const {count,results}=result.data
        //更新状态
        this.setState({
            results,
            count
        })
    }

    //初始化Table所有列的数组
    initColumns = () => {
        this.columns = [
            {
                title: '姓名',
                dataIndex: 'name',//显示数据对应的属性名
            },
            {
                title: '手机号',
                dataIndex: 'phone'
            },
            {
                title: '性别',
                dataIndex: 'gender',
            },
            {
                title: '年龄',
                dataIndex: 'age',
            },
            {
                title: '所属工种',
                dataIndex: 'position',
                render(arr) {
                    return arr.map(item => {
                        return item.name;   //使其返回数组中的一项
                    }).join(",");   //因为数据中user_name可能是两个人所以用逗号分隔开
                }
            },
            {
                title: '所在行业',
                dataIndex: 'trade',
                //由于是数组不能直接渲染
                render(arr) {
                   return arr.map(item => {
                        return item.name;   //使其返回数组中的一项
                    }).join("  |  ");   //因为数据中user_name可能是两个人所以用逗号分隔开
                }
            },
            {
                title: '技能标签',
                dataIndex: 'skill',
                render(arr) {
                    return arr.map(item => {
                        return item.name;   //使其返回数组中的一项
                    }).join("  |  ");   //因为数据中user_name可能是两个人所以用逗号分隔开
                }
            },
            {
                title: '学历信息',
                dataIndex: 'education',
            },
            {
                title: '信用分',
                dataIndex: 'credit',
            },
            {
                title: '操作',
                width: 300,
                render: () => (
                    <span>
                        <Button type='primary'>
                <Icon type='form'/>
                邀请投递简历
            </Button>
                    </span>
                )
            }
        ]
    }

    //为第一次render()准备数据
    componentWillMount() {
        this.initColumns()
    }

    //发异步ajax请求
    componentDidMount() {
        this.getEmployeeInformation()
    }
    render() {
        //读取状态数据
        const {results,count} = this.state
        return (
            <div>
                <Card>
                    <Table
                        rowKey='id'
                        dataSource={results}
                        columns={this.columns}
                        pagination={{
                            total:count,
                            defaultPageSize:PAGE_SIZE,
                            showQuickJumper:true,
                            onChange:(page)=>{
                                this.getEmployeeInformation(page)
                            }

                        }}
                    />
                </Card>
            </div>
        )
    }
}